import Vue from 'vue';
const component = {
  template: `
  <div>
    <input type="text" v-model.number="text">
    <span></span>
  </div>
  `,
  mounted () {
    console.log("component1")
  },
  data () {
    return {
      text: 0
    }
  },
  props: {
    active: Boolean,
    propOne: String
  }
}

const parentOne = new Vue({
  name: 'parentOne'
})

const component2 = {
  extends: component,
  parent: parentOne,
  mounted () {
    console.log("component2");
    console.log('new Vue ', this.$parent.$options.name)
    this.$parent.test1 = "new Vue123"
  },
  data () {
    return {
      text2: 'a2'
    }
  }
}

new Vue({
  parent: parentOne,
  components: {
    component2
  },
  mounted () {
    console.log("new Vue")

    console.log("this", this.$refs)
    console.log(this.$refs)
    console.log('new Vue ', this.$parent.$options.name)
  },
  data () {
    return {
      test1: "value123",
      active: true
    }
  },
  template: `
    <div >
    <div>{{test1}}</div>
     <component2 :propOne="test1" ref="testVue" :active="active"></component2>
    </div>
   `,
  el: '#app'
})
